@charset "UTF-8";
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td, menu {
  margin: 0;
  padding: 0; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

ul, dl, ol, li {
  list-style: none; }

img, fieldset, input[type="submit"] {
  border: 0 none; }

em {
  font-style: normal; }

strong {
  font-weight: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button, input[type="button"] {
  cursor: pointer;
  border: 0 none; }

a, button, input, img {
  -webkit-touch-callout: none; }

img {
  /*pointer-events:none;*/
  /*禁止图片的点击事件，例如长按保存图片*/ }

input, select, textarea {
  outline: none; }

a {
  text-decoration: none; }

.fl {
  float: left; }

.fr {
  float: right; }

.clear {
  clear: both; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

html, body {
  /*禁止用户选择元素*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  /*禁止元素点击出现半透明黑色背景*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

html {
  height: 100%;
  width: 100%;
  font-family: 'Heiti SC', 'Microsoft YaHei';
  outline: 0;
  -webkit-text-size-adjust: none; }

body {
  height: 100%;
  margin: 0;
  position: relative; }

.dn {
  display: none; }

.abs {
  position: absolute; }

@-webkit-keyframes yun1 {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0); }
  100% {
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0); } }

@-webkit-keyframes yun2 {
  0% {
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0); } }

@-webkit-keyframes ft {
  0% {
    left: 80%; }
  100% {
    left: 10%; } }

@-webkit-keyframes moveGroup {
  0% {
    left: 35px; }
  100% {
    left: -40px; } }

@-webkit-keyframes tiparrow {
  0% {
    -webkit-transform: translate3d(0, 6px, 0);
    transform: translate3d(0, 6px, 0); }
  100% {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
    opacity: .5; } }

@-webkit-keyframes diban1 {
  0% {
    -webkit-transform: scale(1.4, 1);
    transform: scale(1.4, 1); }
  100% {
    -webkit-transform: scale(1.2, 1);
    transform: scale(1.2, 1); } }

@-webkit-keyframes thb {
  0% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); } }

@-webkit-keyframes light {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes thb1Box {
  0% {
    -webkit-transform: translate3d(60px, 0, 0);
    transform: translate3d(60px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-60px, 0, 0);
    transform: translate3d(-60px, 0, 0); } }

@-webkit-keyframes p3_db1 {
  0% {
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes p3_db2 {
  0% {
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes qp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0);
    opacity: .2; } }

@-webkit-keyframes p3_db5 {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    -webkit-transform: scale(1, 1.3);
    transform: scale(1, 1.3); } }

@-webkit-keyframes tipArow {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); } }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes yf1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  90% {
    -webkit-transform: translate3d(-45px, -120px, 0) rotate(30deg);
    transform: translate3d(-45px, -120px, 0) rotate(30deg);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(-45px, -120px, 0) rotate(40deg);
    transform: translate3d(-45px, -120px, 0) rotate(40deg);
    opacity: 0; } }

@-webkit-keyframes yf2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, -120px, 0) rotate(-30deg);
    transform: translate3d(-5px, -120px, 0) rotate(-30deg);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(-5px, -120px, 0) rotate(-40deg);
    transform: translate3d(-5px, -120px, 0) rotate(-40deg);
    opacity: 0; } }

@-webkit-keyframes yf3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  90% {
    -webkit-transform: translate3d(40px, -130px, 0) rotate(-30deg);
    transform: translate3d(40px, -130px, 0) rotate(-30deg);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(40px, -130px, 0) rotate(-40deg);
    transform: translate3d(40px, -130px, 0) rotate(-40deg);
    opacity: 0; } }

@-webkit-keyframes tip2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  75% {
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
    opacity: 0; } }

.musicBtn {
  position: absolute;
  width: .48rem;
  height: .48rem;
  background: url(../img/music.png) no-repeat center/contain;
  z-index: 98;
  top: .2rem;
  right: .2rem; }

.pause {
  background: url(../img/pause.png) no-repeat center/contain; }

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; }

.enter {
  top: 0; }

.t_center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.homePage {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -3.2rem;
  width: 12.85rem;
  height: 100%;
  -webkit-perspective: 500px;
  perspective: 500px; }
  .homePage .tiparrow {
    left: 50%;
    top: 9.77rem;
    margin-left: -.105rem;
    -webkit-animation: tiparrow 1s infinite both; }
  .homePage .yun1 {
    width: 6.24rem;
    top: .24rem;
    right: .7rem;
    -webkit-animation: yun1 14s linear .5s infinite both alternate; }
  .homePage .yun2 {
    width: 7.58rem;
    top: -.08rem;
    left: -2.74rem;
    -webkit-animation: yun2 14s linear .5s infinite both alternate; }
  .homePage .yun3 {
    width: 7.58rem;
    top: .65rem;
    right: -3.33rem;
    -webkit-animation: yun1 14s linear .5s infinite both alternate; }
  .homePage .ft {
    width: 0.96rem;
    left: 0rem;
    z-index: 9;
    top: .72rem;
    -webkit-animation: ft 20s linear .5s infinite both; }
  .homePage .door1 {
    width: 1.3rem;
    height: 1.3rem;
    top: 8rem; }
  .homePage > .inner {
    position: absolute;
    width: 12.85rem;
    height: 8.06rem;
    left: 0;
    bottom: 0;
    overflow: hidden; }
    .homePage > .inner .word {
      top: 6.6rem; }
    .homePage > .inner .zsp {
      left: 3.6rem;
      bottom: 0; }
    .homePage > .inner .hulan {
      left: 9.31rem;
      bottom: 0; }
    .homePage > .inner .tiparrow {
      left: 50%;
      top: 8.57rem;
      margin-left: -.105rem;
      -webkit-animation: tiparrow 1s infinite both; }
    .homePage > .inner .moveGroup {
      position: absolute;
      width: 14rem;
      height: 8.06rem;
      left: 0;
      -webkit-animation: moveGroup 5s linear .5s infinite both alternate;
      bottom: 0; }
      .homePage > .inner .moveGroup .floor1 {
        width: 100%;
        bottom: 0;
        left: 0;
        height: 2.08rem; }
      .homePage > .inner .moveGroup .panda {
        left: -.575rem;
        bottom: 0; }
      .homePage > .inner .moveGroup .ludeng {
        bottom: .57rem;
        left: 8.28rem; }

.t_center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%); }

.page2 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -webkit-perspective: 500px;
  perspective: 500px; }
  .page2 > .inner {
    width: 9.64rem;
    height: 100%;
    top: 0;
    left: -1.62rem; }
    .page2 > .inner .dingdeng {
      top: 0; }
    .page2 > .inner .diban1 {
      bottom: 0;
      left: .94rem;
      height: 1.7rem;
      -webkit-animation: diban1 1s linear .5s infinite both alternate; }
    .page2 > .inner .door2Box {
      width: 5.68rem;
      height: 6.88rem;
      top: 1.77rem;
      overflow: hidden;
      -webkit-perspective: 500px;
      perspective: 500px; }
      .page2 > .inner .door2Box .thb {
        top: -.2rem;
        left: -.54rem;
        -webkit-animation: thb 2s linear .5s infinite both alternate; }
      .page2 > .inner .door2Box .diban2 {
        bottom: 0; }
      .page2 > .inner .door2Box .doorL {
        width: 2.84rem;
        height: 6.88rem;
        left: 0;
        top: 0;
        background: url(../img/doorL2.png) no-repeat center/contain; }
      .page2 > .inner .door2Box .doorR {
        width: 2.84rem;
        height: 6.88rem;
        right: 0;
        top: 0;
        background: url(../img/doorR2.png) no-repeat center/contain;
        -webkit-transform-origin: right;
        transform-origin: right;
        -webkit-transition: all 1s;
        transition: all 1s; }
      .page2 > .inner .door2Box .tip1 {
        left: 3.6rem;
        top: 3rem;
        -webkit-animation: light 1s infinite both alternate; }

.page3 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -webkit-perspective: 500px;
  perspective: 500px; }
  .page3 .swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%; }
    .page3 .swiper-container .swiper-slide {
      width: 5550px; }
  .page3 .container {
    width: 95.8rem;
    height: 100%; }
    .page3 .container .thb1Box {
      width: 52.1rem;
      height: 1.2rem;
      overflow: hidden;
      top: 0;
      left: 0; }
      .page3 .container .thb1Box .p3_thb1 {
        top: 0;
        left: -1.5rem;
        -webkit-animation: thb1Box 6s linear infinite both alternate; }
    .page3 .container .thb2Box {
      width: 27.4rem;
      height: 2.13rem;
      overflow: hidden;
      top: 0;
      right: 6.2rem; }
    .page3 .container .p3_thb2 {
      right: 0;
      top: 0; }
    .page3 .container .bgrect {
      width: 62.49rem;
      height: 6.71rem;
      left: .31rem;
      top: .92rem;
      background: url(../img/p3/bgrect.png) no-repeat center/contain; }
    .page3 .container .bgrect2 {
      width: 20.6rem;
      height: 5.29rem;
      right: 0rem;
      top: 1.76rem;
      background: url(../img/p3/bgrect2.png) no-repeat center/contain; }
    .page3 .container .part1 {
      width: 13.54rem;
      height: 100%;
      left: 0;
      top: 0; }
      .page3 .container .part1 .p3_db1 {
        width: 5.87rem;
        left: 1.3rem;
        bottom: 0;
        -webkit-animation: p3_db1 1s linear infinite both alternate; }
      .page3 .container .part1 .p3_db2 {
        width: 5.86rem;
        left: 3.7rem;
        bottom: 0;
        -webkit-animation: p3_db2 1s linear infinite both alternate; }
      .page3 .container .part1 .jsb {
        width: 12.5rem;
        right: 0;
        top: .17rem; }
    .page3 .container .part2 {
      width: 28.64rem;
      height: 100%;
      top: 0;
      left: 13.54rem; }
      .page3 .container .part2 .p3_db3 {
        width: 7.96rem;
        left: 16.02rem;
        bottom: 0;
        -webkit-animation: p3_db1 1s linear infinite both alternate; }
      .page3 .container .part2 .p3_db4 {
        width: 7.95rem;
        left: 20.21rem;
        bottom: 0;
        -webkit-animation: p3_db2 1s linear infinite both alternate; }
      .page3 .container .part2 .p3_xmzb {
        width: 28.64rem;
        top: .7rem;
        left: 0; }
      .page3 .container .part2 .p3_zs1 {
        width: 4.64rem;
        left: 10.4rem;
        top: 1.27rem; }
      .page3 .container .part2 .p3_rL {
        left: 5rem;
        top: 3rem;
        height: 1.52rem;
        -webkit-animation: light .8s infinite both alternate; }
      .page3 .container .part2 .p3_lL {
        width: 1.51rem;
        left: 1.86rem;
        top: 3rem;
        -webkit-animation: light .8s infinite both alternate; }
      .page3 .container .part2 .p3_tfk {
        width: 1.72rem;
        height: .85rem;
        left: 3.42rem;
        top: 1.21rem;
        background: url(../img/p3/tfk.png) no-repeat center/contain; }
        .page3 .container .part2 .p3_tfk .p3_qp1 {
          width: 0.29rem;
          left: 1.5rem;
          top: .44rem;
          -webkit-animation: qp 1.4s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp2 {
          width: 0.42rem;
          left: 1.5rem;
          top: .22rem;
          -webkit-animation: qp 3s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp3 {
          width: 0.18rem;
          left: 1.5rem;
          top: .57rem;
          -webkit-animation: qp 1s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp4 {
          width: 0.12rem;
          left: 1.5rem;
          top: .36rem;
          -webkit-animation: qp .8s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp5 {
          width: 0.1rem;
          left: 1.5rem;
          top: .38rem;
          -webkit-animation: qp 1.2s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp6 {
          width: 0.24rem;
          left: 1.5rem;
          top: .1rem;
          -webkit-animation: qp 2s linear infinite both; }
        .page3 .container .part2 .p3_tfk .p3_qp7 {
          width: 0.11rem;
          left: 1.5rem;
          top: .2rem;
          -webkit-animation: qp .6s linear infinite both; }
      .page3 .container .part2 .zt {
        width: 7.5rem;
        height: 4.68rem;
        left: .72rem;
        bottom: 0;
        background: url(../img/p3/zt.png) no-repeat center/contain; }
        .page3 .container .part2 .zt .p3_ztp1 {
          left: 1.34rem;
          top: -.47rem;
          width: 1.49rem; }
        .page3 .container .part2 .zt .p3_ztp2 {
          width: 1.49rem;
          right: 1.65rem;
          top: -.47rem; }
        .page3 .container .part2 .zt .p3_ztp3 {
          width: 1.49rem;
          left: 1.31rem;
          top: 1.39rem; }
        .page3 .container .part2 .zt .p3_ztp4 {
          width: 1.49rem;
          right: 1.39rem;
          top: 1.31rem; }
      .page3 .container .part2 .p3_xmjs {
        width: 20.02rem;
        left: 8.4rem;
        top: 1.16rem; }
    .page3 .container .part3 {
      width: 9.68rem;
      height: 100%;
      top: 0;
      left: 42.18rem;
      background: url(../img/p3/part3Bg.png) no-repeat left 0.7rem/9.67rem 8.97rem; }
      .page3 .container .part3 .gq {
        left: 2.89rem;
        top: 4.38rem;
        width: 5.59rem;
        height: 5.36rem;
        background: url(../img/p3/gq.png) no-repeat center/contain; }
        .page3 .container .part3 .gq .yf1 {
          width: 0.41rem;
          left: 3.4rem;
          top: 1.8rem;
          -webkit-animation: yf1 2s infinite both; }
        .page3 .container .part3 .gq .yf2 {
          width: 0.34rem;
          left: 3.4rem;
          top: 1.8rem;
          -webkit-animation: yf2 2.4s 1s infinite both; }
        .page3 .container .part3 .gq .yf3 {
          width: 0.68rem;
          left: 3.4rem;
          top: 1.8rem;
          -webkit-animation: yf3 2.8s 1.4s infinite both; }
    .page3 .container .part4 {
      width: 26.7rem;
      height: 100%;
      top: 0;
      left: 51.82rem; }
      .page3 .container .part4 .p3_db5 {
        width: 12.41rem;
        left: .4rem;
        bottom: 0;
        -webkit-animation: p3_db5 1s linear infinite both alternate; }
      .page3 .container .part4 .p3_db6 {
        width: 7.22rem;
        left: 11.64rem;
        bottom: 0;
        -webkit-animation: p3_db2 1s linear infinite both alternate; }
      .page3 .container .part4 .p3_dpz1 {
        left: 6.46rem;
        top: 0;
        width: 1.84rem;
        height: 3.88rem;
        background: url(../img/p3/dpz1.png) no-repeat center/contain; }
      .page3 .container .part4 .p3_dpz2 {
        left: 6.46rem;
        top: 0;
        width: 1.84rem;
        height: 3.88rem;
        background: url(../img/p3/dpz2.png) no-repeat center/contain;
        -webkit-animation: light 1.6s infinite both alternate; }
      .page3 .container .part4 .ylzt {
        width: 26.7rem;
        height: 9.65rem;
        top: .43rem;
        left: 0;
        background: url(../img/p3/ylzt.png) no-repeat center/contain; }
        .page3 .container .part4 .ylzt .tipArow1 {
          left: 12.6rem;
          top: 1.2rem; }
        .page3 .container .part4 .ylzt .tipArow2 {
          right: 3rem;
          top: 2rem; }
        .page3 .container .part4 .ylzt .mp1 {
          width: 2rem;
          left: 9.7rem;
          top: 6.2rem; }
        .page3 .container .part4 .ylzt .tipArow {
          width: .22rem;
          height: .28rem;
          background: url(../img/tc/tipArow.png) no-repeat center/contain;
          -webkit-animation: tipArow 1.2s infinite both; }
        .page3 .container .part4 .ylzt .photo1 {
          width: 6.11rem;
          height: 3.95rem;
          left: 9.57rem;
          top: 2.07rem;
          background: url(../img/p3/photo1.png) no-repeat center/contain; }
        .page3 .container .part4 .ylzt .mp2 {
          width: 1.48rem;
          right: 1rem;
          top: 1.6rem; }
        .page3 .container .part4 .ylzt .tc2Click {
          width: 3.6rem;
          height: 4.44rem;
          right: 1rem;
          top: 2.45rem;
          background: url(../img/p3/tc2Click.png) no-repeat center/contain; }
          .page3 .container .part4 .ylzt .tc2Click .p3_sz {
            width: 0.09rem;
            left: 1.16rem;
            top: 1.96rem;
            -webkit-transform-origin: center .42rem;
            -webkit-animation: rotate 60s linear infinite both; }
          .page3 .container .part4 .ylzt .tc2Click .p3_fz {
            width: 0.09rem;
            left: 1.16rem;
            top: 1.9rem;
            -webkit-transform-origin: center .46rem;
            -webkit-animation: rotate 1s linear infinite both; }
        .page3 .container .part4 .ylzt .hd1 {
          right: 7.7rem;
          top: 2.8rem;
          width: .56rem;
          height: .47rem;
          background: url(../img/p3/hd1.png) no-repeat center/contain;
          -webkit-animation: light 1s infinite both alternate; }
        .page3 .container .part4 .ylzt .hd2 {
          right: 7.1rem;
          top: 3rem;
          width: .46rem;
          height: .4rem;
          background: url(../img/p3/hd2.png) no-repeat center/contain;
          -webkit-animation: light 1s infinite .5s both alternate; }
    .page3 .container .part5 {
      width: 7.28rem;
      height: 100%;
      top: 0;
      left: 78.5rem;
      -webkit-perspective: 500px;
      perspective: 500px; }
      .page3 .container .part5 .p3_dd {
        width: 3.02rem;
        top: .8rem; }
      .page3 .container .part5 > .inner {
        width: 7.28rem;
        height: 8.18rem;
        left: 0;
        bottom: 0;
        background: url(../img/p3/kjztenter.png) no-repeat center/contain; }
        .page3 .container .part5 > .inner .kjztDoor {
          width: 3.64rem;
          height: 4.11rem;
          top: 1.82rem;
          left: 1.9rem; }
          .page3 .container .part5 > .inner .kjztDoor .p3_doorL {
            width: 1.82rem;
            left: 0;
            top: 0; }
          .page3 .container .part5 > .inner .kjztDoor .p3_doorR {
            width: 1.82rem;
            right: 0;
            top: 0; }
    .page3 .container .tip2 {
      width: 1.09rem;
      -webkit-transition: 0.2s;
      transition: 0.2s;
      left: 3.6rem;
      top: 6.4rem;
      -webkit-animation: tip2 1s infinite both; }
    .page3 .container .tip3 {
      left: 4.2rem;
      top: 6rem;
      -webkit-animation: light 1s infinite both alternate;
      width: .86rem; }
